<template>
  <view
    class="detail-top"
    v-for="(item, index) in BookingDetail.data"
    :key="index"
  >
    <image :src="item.image" mode="aspectFill" />
    <view class="sales-price">
      <text class="price">￥{{ item.price }}</text>
      <text class="sales">已约{{ item.sales }}</text>
    </view>
    <view class="detail-title">{{ item.title }}</view>
  </view>
  <template v-if="BookingDetail.data.length > 0">
    <view class="orderTime block">
      <view class="title">体检时间选择</view>
      <view class="order-time">
        <view
          class="time-list"
          v-for="(item, index) in BookingDetail.data[0].date"
          :key="index"
          @click="selectTime(index, item.date)"
          :class="{ selectClass: currentIndex == index }"
        >
          <text class="date">
            {{ item.date }}
          </text>
          <text class="week">
            {{ item.week }}
          </text>
        </view>
      </view>
    </view>
    <!-- 适用人群 -->
    <view class="be_suit block">
      <view class="title">适用人群</view>
      <view class="be_suit_crowd">
        <view
          class="crowd_lists"
          v-for="(item, index) in BookingDetail.data[0].crowd"
          :key="index"
        >
          <image :src="item.image" mode="aspectFill" />
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    <!-- 套餐项目 -->
    <view class="Meal-Project block">
      <view class="title">套餐项目</view>
      <!-- 套餐项目流程  -->
      <view
        class="flow"
        v-for="(item, index) in BookingDetail.data[0].project"
        :key="index"
      >
        <view class="flow-title">{{ item.title }}</view>
        <view class="flow-detail" v-for="(subitem, i) in item.content" :key="i">
          <view class="flow-name">{{ subitem.thing }}</view>
          <view class="flow-desc">{{ subitem.details }}</view>
        </view>
      </view>
    </view>
  </template>
  <!-- 选择就诊人 -->
  <view class="SelectPatient">
    <view
      class="bottomBtn"
      v-for="(item, index) in BookingDetail.data"
      :key="index"
    >
      <view class="leftBtn">检测费用:￥{{ item.price }}</view>
      <view class="rightBtn" @click="SelectPatient">选择成员</view>
    </view>
  </view>
  <!-- 弹窗选择成员 -->
  <SemenMber ref="compNone" />
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { onLoad,onShow } from "@dcloudio/uni-app";
import apiRequest from "~/api/index";
import { onMounted, ref, reactive } from "vue";
import SemenMber from "~/components/se-member/se-member";
import skIndex from '~/Skeleton/SK-phy-details.vue'
let id = ref(null);
// 骨架屏
let skeLeton = ref(true)

onLoad((e) => {
  id.value = e.id;
  submit_Data.phy_name = e.title;
});
// 体检详情数据
let BookingDetail = reactive({
  data: {},
});
onShow(async () => {
  const res = await apiRequest.BookingDetail(id.value);
  BookingDetail.data = res.data;
  // 骨架屏
  skeLeton.value = false
});
let currentIndex = ref(null);
const selectTime = (i, date) => {
  currentIndex.value = i;
  submit_Data.phy_time = date;
};
// 传递给子组件的数据
let submit_Data = reactive({
  phy_name: "",
  phy_time: "",
  show: true,
});
let compNone = ref();
function SelectPatient() {
  compNone.value.trigGer(submit_Data);
}
</script>

<style lang="scss">
.detail-top {
  @apply bg-light-50;
  padding-bottom: 20rpx;
  image {
    width: 100%;
    height: 400rpx;
  }
}
.detail-top .sales-price {
  @apply flex;
  padding: 0 20rpx;
  justify-content: space-between;
}
.detail-top .sales-price .price {
  @apply flex text-red-400 font-bold;
  margin-bottom: 20rpx;
}
.detail-top .detail-title {
  padding: 0 20rpx;
  font-size: 34rpx;
  @apply font-bold;
}
.block {
  margin: 20rpx;
  padding: 20rpx;
  @apply bg-light-50;
}
/* 预约时间段 */
.title {
  font-size: 34rpx;
  @apply font-bold;
  margin-bottom: 15rpx;
}
.order-time {
  @apply flex bg-light-50;
  overflow: auto;
}
/* 隐藏导航条 */
.order-time::-webkit-scrollbar {
  display: none;
}
.order-time .time-list {
  @apply flex flex-col flex-wrap;
  flex-shrink: 0;
  padding: 20rpx 25rpx;
  border-radius: 20rpx;
}
.be_suit_crowd {
  @apply flex;
  justify-content: space-between;
}
.be_suit_crowd .crowd_lists {
  @apply flex flex-col;
  justify-content: center;
  align-items: center;
}
.be_suit_crowd .crowd_lists image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  padding-bottom: 10rpx;
}
/* 套餐项目 */
.flow-title {
  @apply flex font-bold;
  justify-content: center;
  padding: 10rpx 0;
  background-color: #f0f2f8;
  margin: 15rpx 0;
}
.flow-detail {
  @apply flex;
}
.flow-detail view {
  @apply flex;
  justify-content: center;
  align-items: center;
  margin: 5rpx;
  padding: 10rpx;
  border-radius: 10rpx;
  background-color: #f0f2f8;
}
.flow-detail .flow-name {
  width: 200rpx;
  flex-shrink: 0;
}
.flow:last-child {
  padding-bottom: 150rpx;
}
/* 底部按钮 */
.bottomBtn {
  padding: 20rpx 0 50rpx 0;
  display: flex;
  background-color: #ffffff;
  justify-content: space-around;
}
.bottomBtn > view {
  width: 40%;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
}
.leftBtn {
  @apply text-red-400 font-bold;
}
.rightBtn {
  background-color: #2c76ef;
  color: #ffffff;
}
.SelectPatient {
  @apply fixed bottom-0 right-0 left-0;
}
</style>
